import axios from "axios";
import React, { useState, useReducer, useContext } from "react";
/*
    后代传参：
    1. 定义一个上下文对象
        const titleContext = React.createContext()
    2. 通过 Provider 配置 value 属性将值传递到后代组件
        <titleContext.Provider value={{
            title: '大标题',
            msg: '传家宝'
        }}>
    3. 通过 useContext 接收祖先组件传递过来的数据
        const value = useContext(titleContext)
*/



// 1. 定义一个上下文对象
const titleContext = React.createContext()


function First(props) {

    return <div>
        <h1>First - 父组件 </h1>
        <titleContext.Consumer>
            {
                (value) => {
                    return <>
                        <p> {value.title} -- {value.msg} </p>
                    </>
                }
            }
        </titleContext.Consumer>
        <hr />
        <Second title={props.name}></Second>
    </div>
}


function Second(props) {

    // 3. 通过 useContext 接收祖先组件传递过来的数据
    const value = useContext(titleContext)

    return <div>
        <h1>Second - 子组件 - {value.title} - {value.msg}</h1>
    </div>
}


function App() {

    return <div>
        <h1>App - 祖先组件</h1>
        <hr />
        {/* 2. 通过 Provider 配置 value 属性将值传递到后代组件 */}
        <titleContext.Provider value={{
            title: '大标题',
            msg: '传家宝'
        }}>
            <First></First>
        </titleContext.Provider>

    </div>
}


export default App